<template>
  <div class="detail-container">
    <el-row :gutter="10">
      <!-- 角色名 -->
      <el-col :xs="24" :sm="24" :md="11" :lg="11" :xl="11">
        <div class="item">
          <div class="label">
            <span>{{$t('role.name')}}</span>
          </div>
          <div class="content">
            <span>{{role.name}}</span>
          </div>
        </div>
      </el-col>
      <!-- 状态 -->
      <el-col :xs="24" :sm="24" :md="11" :lg="11" :xl="11">
        <div class="item">
          <div class="label">
            <span>{{$t('role.status')}}</span>
          </div>
          <div class="content">
            <span>{{ $t('ban') }}：{{role.status === 0 ? $t('no') : $t('yes')}}</span>
          </div>
        </div>
      </el-col>
      <!-- 权限 -->
      <el-col :xs="24" :sm="24" :md="11" :lg="11" :xl="11">
        <div class="item">
          <div class="label">
            <span>{{$t('role.permissions')}}</span>
          </div>
          <div class="content">
            <!-- <span>{{getPermissionDisplay(role.permissions)}}</span> -->
            <el-tag v-for="(item) in getPermissionDisplay(role.permissions)" :key="item">{{item}}</el-tag>
          </div>
        </div>
      </el-col>
      <!-- 创建时间 -->
      <el-col :xs="24" :sm="24" :md="11" :lg="11" :xl="11">
        <div class="item">
          <div class="label">
            <span>{{$t('createdAt')}}</span>
          </div>
          <div class="content">
            <span>{{role.created_at}}</span>
          </div>
        </div>
      </el-col>
      <!-- 更新时间 -->
      <el-col :xs="24" :sm="24" :md="11" :lg="11" :xl="11">
        <div class="item">
          <div class="label">
            <span>{{$t('updatedAt')}}</span>
          </div>
          <div class="content">
            <span>{{role.updated_at}}</span>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- <div class="button-box">
      <el-button 
        type="default" 
        @click.native.prevent="goToRoleManagement">
        {{ $t('back') }}
      </el-button>  
      <el-button 
        type="primary" 
        @click.native.prevent="deleteProduct">
        {{ $t('production.remove') }}
      </el-button>  
    </div> -->
  </div>
</template>

<script>

export default {
  name: "RoleDetail",
  data() {
    return {
      // 角色id
      roleID: this.$route.query.roleID,
      // 从服务器获取的角色对象
      role: {},
      // 组件中的loading遮罩层对象，调用openFullScreenLoading方法时赋值
      loading: null,
    };
  },
  created: function() {
    this.init()
  },
  methods: {
    init() {
      this.openFullScreenLoading()

      this.getRoleByID(this.roleID)
        .then(data => {
          this.processRoleData(data)

          this.closeFullScreenLoading()
        }).catch(error => {
          console.error('init role detail has error:', error)

          this.$notify.error({
            title: this.$t('operationFailed'),
            message: this.$t('errorTips'),
          })

          this.closeFullScreenLoading()
        })
    },
    /**
     * 调用api，获取角色详情
     */
    getRoleByID(id) {
      return this.$store.dispatch('getRoleByID', { id })
    },
    /**
     * 处理权限数据
     */
    processRoleData(data) {
      if (data && data['code'] === 0) {
        const roleData = data['data']

        if (roleData) {
          this.role = roleData
        } 
      } else {
        this.$notify({
          title: this.$t('operationFailed'),
          message: data['msg'],
          type: 'warning'
        })
      }
    },
    getPermissionDisplay(permissions) {
      let result = ''
      if (Array.isArray(permissions) && permissions.length > 0) {
        result = permissions.map(item => `${item.name}(${item.title})`)
      }
      return result
    },
    /**
     * 跳转到角色管理页面
     */
    goToRoleManagement() {
      this.$router.push({ path: '/role' })
    },
    /**
     * 显示loading遮罩层
     */
    openFullScreenLoading() {
      this.loading = this.$loading({
        lock: true,
        text: this.$t('loading') + '...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
    },
    /**
     * 关闭loading遮罩层
     */
    closeFullScreenLoading() {
      if (this.loading) {
        this.loading.close()
      }
    }
  },
  computed: {}
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import '@/styles/variables.scss';
@import '../../styles/detail-public.scss';
.detail-container {
  .button-box {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }
  .content {
    .el-tag {
      margin: 3px;
      margin-top: 0;
      margin-bottom: 6px;
    }
  }
}
</style>

